<template>
    <div style="border-bottom: 1px solid #ccc;display: flex;">
        <div style="flex: 1;">
            <el-menu :default-active="activeIndex" mode="horizontal" router="true">
                <el-menu-item index="/">
                    文化展示
                </el-menu-item>
                <el-menu-item index="/discussView">
                    交流论坛
                </el-menu-item>
                <el-menu-item index="/personCentre">
                    个人中心
                </el-menu-item>

            </el-menu>
        </div>
        <div style="width: 200px;">
            <el-avatar :size="50" :src="url" />
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{ name }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <!-- <el-dropdown-item>个人信息</el-dropdown-item> -->
                        <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import BaseUserInfoComponent from "./BaseUserInfoComponent.vue";
import { ElMessage } from 'element-plus'
import { userInfoService } from '../api/user'


export default {
    name: "MenuView",
    components: { BaseUserInfoComponent },
    data() {
        return {
            activeIndex: 'activeIndex',
            url: '',
            name: ''
        }
    },
    async mounted() {
        this.activeIndex = '/' + this.$route.name;
        let result = await userInfoService()
        this.name = result.data.name
        this.url = result.data.img
    },
    methods: {
        outLogin() {
            localStorage.removeItem('Authorization')
            ElMessage.success('退出登录成功')
            this.$router.push('/login')
        }
    }
}

</script>

<!-- <style scoped>
.el-menu-demo {
    width: 100%;
}
</style> -->

<style>
.el-dropdown-link{
    color: rgb(0, 0, 0);
    font-size: 20px;
    margin-top: 10px;
    /* margin: auto; */
    outline: none;
}
</style>

